<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>js复制到剪贴板</title>
    <script src="https://cdn.bootcss.com/clipboard.js/1.7.1/clipboard.js"></script>
    <script src="//cdn.bootcss.com/vue/2.2.1/vue.js"></script>
    <style>
        .m-link{ color: #20a0ff; cursor: pointer;line-height: 1.6;}
        .m-link:hover{ color: #4db3ff; }
        .m-link:active{ color: #1d90e6; }
        input,textarea {  background-image: none; outline: none; border-radius: 4px; border: 1px solid #bfcbd9; padding: 3px 10px; height: 36px; box-sizing: border-box; vertical-align: middle; }
        h3{    text-align: center;
            margin-bottom: 40px;}
    </style>
</head>
<body>
<div id="app">
    <h3>js实现复制粘贴</h3>
    <div>
        <input id="input" type="textarea" value="啦啦啦,啦啦啦,我是卖报的小行家" style="width: 300px;">
        <a class="btn m-link" data-clipboard-target="input">复制</a>
        <a class="btn m-link" data-clipboard-action="cut" data-clipboard-target="input">剪切</a>
    </div>

    <div style="margin-top: 20px;">
        <a class="btn m-link" data-clipboard-target="input" data-clipboard-text="鸡鸡鸡，陈yan开飞机">复制指定文字内容到剪贴板</a>
        <textarea name="" id="" cols="30" rows="3" style="display: block;" placeholder="在这里粘贴"></textarea>
    </div>
    </div>
<script>
   var clipboard = new Clipboard('.btn');
   clipboard.on('success', function (e) {
       console.log('复制成功',e.text);
       e.clearSelection();
   })

    clipboard.on('error', function (e) {
        console.error('复制出错');
    })
</script>
</body>
</html>